<template>
  <div class="questionList">
    <question-top :itemInfo="itemInfo"></question-top>
    
    <div class="question-wrap" v-if="itemQuestions && itemQuestions.length > 0">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          v-for="item in itemQuestions"
          class="question-wrap-item">
          <div class="question-wrap-item-con">
            <span class="icon icon_ask"></span>
            <span class="ask-text bold">{{ item.comment }}</span>
          </div>
          <div v-if="item.answers_num > 0" class="question-wrap-item-con">
            <span class="icon icon_answer"></span>
            <span class="ask-text" v-if="item.user_answers">{{ item.user_answers[0].comment }}</span>
          </div>
          <div v-if="item.answers_num > 0 && have_buy == 1" class="check-all" @click="JumpName('question-detail',{questionId:item.id})">
            <span>查看{{ item.answers_num }}个回答</span>
            <span class="icon-right"><i class="icon-right"></i></span>
          </div>
  
          <div v-if="item.answers_num == 0" class="question-wrap-item-con">
            <div class="no-answer">暂无回答，答友们正在飞速赶来</div>
          </div>
          <div v-if="item.answers_num == 0 && have_buy == 1" class="check-all" @click="JumpName('question-detail',{questionId:item.id})">
            <span>去回答</span>
            <span class="icon-right"><i class="icon-right"></i></span>
          </div>
          
        </div>
      </van-list>
      
    </div>
    
    <div v-if="itemQuestions && itemQuestions.length <= 0 && isShowNoData">
      <no-data :noData=noData></no-data>
    </div>
    
    <div class="comment-bottom">
      <div class="question-flex">
        <div class="input-area">
          <input type="text" v-model="comment" placeholder="向已购买的小伙伴提问">
        </div>
        <div class="btn-area">
          <van-button round class="btn" @click="handleClickAsk">提问</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020-07-15 11:18:14
   * @Last Modified by: wuzhiying
   * @Last Modified time: 2020-08-01 16:08:00
   */
  import Vue from 'vue'
  import { List } from 'vant'
  Vue.use(List)

  import noData from '@/components/noData/index'
  import questionTop from '../components/questionTop'
  import { getItemQuestion, askQusetion } from '@/api/item/question'
  export default Vue.extend({
    name: 'index',
    data() {
      return {
        itemInfo: {},
        locked: true,
        loading: false,
        finished: false,
        isShowNoData: false,
        have_buy: '',
        comment: '',
        itemQuestions: [],
        postData: {
          item_id: '',
          page: 2,
          per_page: 10
        },
        noData: {
          width: '184px',
          marginTop: '100px',
          txtMarginTop: '-30px',
          img: 'https://img.wifenxiao.com/h5-wfx/images/item/question/noData.png',
          text: '还没有提过问题哦~'
        }
      }
    },
    components: {
      questionTop,
      noData
    },
    mounted() {
      this.init()
      // TODO 触底加载
      window.addEventListener('reachbottom', () => {
        this.onLoad()
      })
    },
    methods: {
      onLoad() {
        if (this.finished) return false
        if (!this.locked) {
          const param = this.postData
          param.item_id = this.$route.query.id
          getItemQuestion(param).then(res => {
            this.$loadingWrap.close()
            this.isShowNoData = true
            this.loading = false
            if (res.status == 1) {
              this.itemQuestions.push(...res.data.item_questions)
              if (res.data.item_questions.length < 10) {
                this.finished = true
              }
              this.postData.page++
            }
          })
        }
      },
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      },
      // 问题列表
      getItemQuestionFn() {
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 50000)
        const param = Object.assign({}, this.postData, true)
        param.page = 1
        param.item_id = this.$route.query.id
        getItemQuestion(param).then(res => {
          this.$loadingWrap.close()
          this.isShowNoData = true
          this.loading = false
          this.have_buy = res.data.have_buy
          if (res.status == 1) {
            const itemInfo = {
              img: res.data.item_img,
              title: res.data.item_title,
              questionNum: res.data.question_num
            }
            this.itemInfo = itemInfo
            this.itemQuestions = res.data.item_questions
            if (res.data.item_questions.length < 10) {
              this.finished = true
            }
            this.locked = false
          }
        })
      },
      /**
       * 提问
       */
      handleClickAsk() {
        const param = {
          item_id: this.$route.query.id,
          comment: this.comment
        }
        if (!param.comment) {
          this.$Error('提问不能为空！')
          return false
        }
        askQusetion(param).then(res => {
          if (res.status == 1) {
            this.$Error('提问成功,请耐心等待审核！')
            this.comment = ''
          }
        })
      },
      /**
       * 初始化
       */
      init() {
        this.getItemQuestionFn()
      }
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin.scss";
  // TODO 小程序处理
  .miniprogram-root {
    .van-button--normal {
      font-size: 28px;
    }
    .no-data .h5-img {
      width: 368px;
      height: 260px;
    }
  }
  .questionList{
    .question-wrap{
      padding-top: 20px;
      padding-bottom: 120px;
      &-item{
        width:700px;
        margin: 0 auto 20px;
        background:rgba(255,255,255,1);
        border-radius:20px;
        padding: 30px 25px;
        &-con{
          // TODO 定义了lineClamp就不需要再定义font-size 和line-height了 否则在小程序会显示不出来
          // line-height: 40px;
          // height: 40px;
          margin-bottom: 25px;
          @include lineClamp(26px,1.4,2);
          /* font-size: 0; */
          .icon{
            display: inline-block;
            width: 40px;
            height: 40px;
            vertical-align: top;
            margin-right: 20px;
            &.icon_ask{
              background:url(https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_ask.png) bottom no-repeat;
              background-size:100% 100%;
            }
            &.icon_answer{
              background:url(https://img.wifenxiao.com/h5-wfx/images/item/detail/icon_answer.png) bottom no-repeat;
              background-size:100% 100%;
            }
          }
          .ask-text{
            color: #333;
            font-size: 26px;
            &.bold{
              font-weight: bold;
            }
          }
          .no-answer{
            padding-left: 60px;
            font-size: 26px;
            color: #999;
          }
          &.noMarginBottom{
            margin-bottom: 0;
          }
        }
        .check-all{
          font-size: 24px;
          color: #F21228;
          padding-left: 60px;
          .icon-right{
            font-size: 18px;
            vertical-align: 2px;
          }
        }
      }
    }
    .comment-bottom{
      // height: 108px;
      position: fixed;
      width: 100%;
      max-width: 750px;
      background: #fff;
      bottom: 0;
      left: 0;
      font-size: 0;
      padding: 0 25px;
      padding-bottom: 60px;
      .question-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
      }
      .input-area{
        width: calc(100vw - 230px);
        display: inline-block;
        height: 76px;
        background: #F7F7F7;
        // padding: 25px;
        border-radius: 40px;
        // margin-top: 16px;
        // margin-right: 20px;
        input{
          font-size: 26px;
          height: 76px;
          line-height: 76px;
          background: #F7F7F7;
          width: 100%;
          padding: 0 20px;
          border-radius: 40px;
        }
      }
      .btn-area{
        display: inline-block;
        .btn{
          width: 160px;
          height: 76px;
          line-height: 76px;
          color: #fff;
          background: #FD4C56;
        }
      }
    }
  }
</style>
